<template>
  <view class="redpacket-container">
    <!-- 顶部导航栏 -->
    <view class="redpacket-header">
      <view class="back-btn" @click="goBack">
        <FeatherIcon name="chevron-left" size="24" color="#333" />
      </view>
      <text class="header-title">发红包</text>
      <view class="header-right"></view>
    </view>

    <!-- 红包表单 -->
    <view class="redpacket-form">
      <!-- 积分金额 -->
      <view class="form-item">
        <view class="item-label">积分</view>
        <view class="item-input">
          <input
            type="digit"
            v-model="redPacketForm.money"
            placeholder="最少32积分"
            class="money-input"
            @input="onMoneyInput"
            style="padding-right: 10rpx"
          />
        </view>
      </view>

      <!-- 红包留言 -->
      <view class="form-item">
        <view class="item-label">留言</view>
        <view class="item-input">
          <input
            type="text"
            v-model="redPacketForm.msg"
            :placeholder="getRedPacketTypeDesc(redPacketForm.type)"
            class="msg-input"
          />
          <view class="emoji-btn" @click="showEmojiSelector = true">
            <FeatherIcon name="smile" size="20" color="#999" />
          </view>
        </view>
      </view>
      <!-- 红包类型选择 -->
      <view class="form-item" @click="openTypeSelector">
        <view class="item-label">红包类型</view>
        <view class="item-value">
          <text>{{ getRedPacketTypeName(redPacketForm.type) }}</text>
          <FeatherIcon name="chevron-right" size="20" color="#999" />
        </view>
      </view>

      <!-- 红包数量 - 只在拼手气和平分红包时显示 -->
      <view
        class="form-item"
        v-if="['random', 'average', 'heartbeat'].includes(redPacketForm.type)"
      >
        <view class="item-label">红包个数</view>
        <view class="item-input">
          <input
            type="number"
            v-model="redPacketForm.count"
            :placeholder="
              redPacketForm.type === 'heartbeat' ? '最少5个' : '请输入红包个数'
            "
            class="count-input"
            style="padding-right: 10rpx"
          />
          <text class="input-unit">个</text>
        </view>
      </view>

      <!-- 猜拳选择 - 只在猜拳红包时显示 -->
      <view
        class="form-item"
        v-if="redPacketForm.type === 'rockPaperScissors'"
        @click="openGestureSelector"
      >
        <view class="item-label">我出</view>
        <view class="item-value">
          <text>{{ getGestureName(redPacketForm.gesture) }}</text>
          <FeatherIcon name="chevron-right" size="20" color="#999" />
        </view>
      </view>

      <!-- 猜拳红包税说明 -->
      <view class="form-item" v-if="redPacketForm.type === 'rockPaperScissors'">
        <view class="item-label">红包税</view>
        <view class="item-value">
          <text>5%（{{ calculateTax() }}积分）</text>
        </view>
      </view>

      <!-- 专属好友 - 只在专属红包时显示 -->
      <view
        class="form-item"
        v-if="redPacketForm.type === 'specify'"
        @click="showUserSelector = true"
      >
        <view class="item-label">专属好友</view>
        <view class="item-value">
          <text>{{
            redPacketForm.receivers.length > 0
              ? `已选择${redPacketForm.receivers.length}人`
              : "请选择好友"
          }}</text>
          <FeatherIcon name="chevron-right" size="20" color="#999" />
        </view>
      </view>
    </view>

    <!-- 发红包按钮 -->
    <view class="redpacket-footer">
      <view class="total-amount">
        <text class="total-amount-label">总积分：</text>
        <text class="total-amount-value">{{
          parseFloat(redPacketForm.money).toFixed(2)
        }}</text>
      </view>
      <button class="send-btn" @click="sendRedPacket" :disabled="!isFormValid">
        发送红包
      </button>
      <text class="help-text" v-if="currentUser"
        >当前余额：{{ currentUser.userPoint || 0 }} 积分</text
      >
      <text class="tax-note" v-if="redPacketForm.type === 'rockPaperScissors'">
        总计：{{ parseFloat(redPacketForm.money).toFixed(2) }}
        (猜拳红包会收取5%税费，由系统在后端自动扣除)
      </text>
    </view>

    <!-- 红包类型选择器 -->
    <view class="custom-popup" v-if="showTypeSelector">
      <view class="popup-mask" @click="closeTypeSelector"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">红包类型</text>
          <view class="popup-close" @click="closeTypeSelector">
            <FeatherIcon name="x" size="24" color="#999" />
          </view>
        </view>
        <view class="popup-body">
          <view
            class="type-item"
            v-for="(type, index) in redPacketTypes"
            :key="index"
            @click="selectRedPacketType(type.value)"
          >
            <view class="type-item-content">
              <view
                class="type-icon"
                :class="{ 'selected-type': redPacketForm.type === type.value }"
              >
                <FeatherIcon :name="type.icon" size="24" color="#ff4d4f" />
              </view>
              <view class="type-info">
                <text class="type-name">{{ type.name }}</text>
                <text class="type-desc">{{ type.desc }}</text>
              </view>
            </view>
            <view
              class="type-selected"
              v-if="redPacketForm.type === type.value"
            >
              <FeatherIcon name="check" size="20" color="#ff4d4f" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 猜拳选择器 -->
    <view class="custom-popup" v-if="showGestureSelector">
      <view class="popup-mask" @click="closeGestureSelector"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">猜拳选择</text>
          <view class="popup-close" @click="closeGestureSelector">
            <FeatherIcon name="x" size="24" color="#999" />
          </view>
        </view>
        <view class="popup-body">
          <view class="gesture-list">
            <view
              class="gesture-item"
              v-for="(gesture, index) in gestureOptions"
              :key="index"
              @click="selectGesture(gesture.value)"
            >
              <view
                class="gesture-icon"
                :class="{
                  'selected-gesture': redPacketForm.gesture === gesture.value,
                }"
              >
                <text>{{ gesture.icon }}</text>
              </view>
              <text class="gesture-name">{{ gesture.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 用户选择器 -->
    <view class="custom-popup" v-if="showUserSelector">
      <view class="popup-mask" @click="closeUserSelector"></view>
      <view class="popup-content user-selector-popup">
        <view class="popup-header">
          <text class="popup-title">选择用户</text>
          <view class="popup-close" @click="closeUserSelector">
            <FeatherIcon name="x" size="24" color="#999" />
          </view>
        </view>
        <view class="popup-body user-selector-body">
          <view class="search-bar">
            <FeatherIcon name="search" size="20" color="#999" />
            <input
              type="text"
              v-model="searchQuery"
              placeholder="搜索用户名"
              @input="filterUsers"
              class="search-input"
            />
          </view>
          <view class="user-list">
            <view v-if="filteredUsers.length === 0" class="no-user-tip">
              <text>没有找到匹配的用户</text>
            </view>
            <view
              v-else
              class="user-item"
              v-for="(user, index) in filteredUsers"
              :key="index"
              @click="toggleUserSelection(user)"
            >
              <view class="user-avatar">
                <image
                  :src="
                    user.userAvatarURL ||
                    'https://file.fishpi.cn/default-avatar.png'
                  "
                  mode="aspectFill"
                ></image>
              </view>
              <view class="user-info">
                <text class="user-name">{{ user.userName }}</text>
              </view>
              <view class="user-selected" v-if="isUserSelected(user)">
                <FeatherIcon name="check" size="20" color="#ff4d4f" />
              </view>
            </view>
          </view>
        </view>
        <view class="user-selector-footer">
          <text class="selected-count"
            >已选择 {{ redPacketForm.receivers.length }} 人</text
          >
          <view class="selector-btn-group">
            <view class="selector-btn cancel-btn" @click="closeUserSelector"
              >取消</view
            >
            <view class="selector-btn confirm-btn" @click="confirmUserSelection"
              >确定</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import {
  showLoading,
  hideLoading,
  showError,
  showSuccess,
} from "@/utils/common.js";
import api from "@/api";
import { isLoggedIn } from "@/api";

// 当前用户信息
const currentUser = ref(null);
// 红包表单数据
const redPacketForm = reactive({
  money: "", // 积分金额
  msg: "摸鱼者，事竟成！", // 红包祝福语
  count: "", // 红包个数，默认1个
  type: "random", // 红包类型，默认拼手气红包
  cover: "", // 红包封面，默认无
  gesture: 0, // 猜拳，0=石头，1=剪刀，2=布
  receivers: [], // 专属红包接收者
  userName: "",
});

// 防止重复发送标志
let isSending = false;

// 红包类型列表
const redPacketTypes = [
  {
    name: "拼手气红包",
    value: "random",
    icon: "gift",
    desc: "摸鱼者，事竟成！",
  },
  {
    name: "平分红包",
    value: "average",
    icon: "share-2",
    desc: "平分红包，人人有份！",
  },
  {
    name: "专属红包",
    value: "specify",
    icon: "user",
    desc: "试试看，这是给你的红包吗？",
  },
  {
    name: "心跳红包",
    value: "heartbeat",
    icon: "heart",
    desc: "玩的就是心跳！",
  },
  {
    name: "猜拳红包",
    value: "rockPaperScissors",
    icon: "scissors",
    desc: "石头剪刀布！",
  },
];

// 猜拳选项
const gestureOptions = [
  { name: "石头", value: 0, icon: "✊" },
  { name: "剪刀", value: 1, icon: "✌️" },
  { name: "布", value: 2, icon: "✋" },
];

// 弹出层状态
const showTypeSelector = ref(false);
const showGestureSelector = ref(false);
const showUserSelector = ref(false);
const showEmojiSelector = ref(false);

// 在线用户列表
const onlineUsers = ref([]);
const filteredUsers = ref([]);
const searchQuery = ref("");

// 表单验证
const isFormValid = computed(() => {
  // 基本验证：积分必须大于0
  if (!redPacketForm.money || parseFloat(redPacketForm.money) <= 0) {
    return false;
  }

  // 验证最低积分 - 所有红包类型统一验证
  if (parseFloat(redPacketForm.money) < 32) {
    return false;
  }

  // 红包个数验证
  if (["random", "average"].includes(redPacketForm.type)) {
    if (!redPacketForm.count || parseInt(redPacketForm.count) <= 0) {
      return false;
    }
  }

  // 心跳红包至少5个
  if (redPacketForm.type === "heartbeat") {
    if (!redPacketForm.count || parseInt(redPacketForm.count) < 5) {
      return false;
    }
  }

  // 专属红包必须选择接收者
  if (
    redPacketForm.type === "specify" &&
    redPacketForm.receivers.length === 0
  ) {
    return false;
  }

  return true;
});

// 获取红包类型名称
const getRedPacketTypeName = (type) => {
  const found = redPacketTypes.find((item) => item.value === type);
  return found ? found.name : "拼手气红包";
};

// 获取红包类型描述
const getRedPacketTypeDesc = (type) => {
  const found = redPacketTypes.find((item) => item.value === type);
  return found ? found.desc : "摸鱼者，事竟成！";
};

// 获取猜拳名称
const getGestureName = (gesture) => {
  const found = gestureOptions.find((item) => item.value === gesture);
  return found ? found.name : "石头";
};

// 积分输入处理
const onMoneyInput = (e) => {
  // 限制只能输入数字和小数点，且最多两位小数
  const value = e.detail.value;
  if (value) {
    // 使用正则表达式限制格式
    let formattedValue = value.replace(/[^\d.]/g, ""); // 只保留数字和小数点
    // 处理多个小数点的情况
    const parts = formattedValue.split(".");
    if (parts.length > 2) {
      formattedValue = parts[0] + "." + parts.slice(1).join("");
    }
    // 限制小数点后两位
    if (parts.length === 2 && parts[1].length > 2) {
      formattedValue = parts[0] + "." + parts[1].substring(0, 2);
    }
    redPacketForm.money = formattedValue;
  }
};

// 计算猜拳红包税
const calculateTax = () => {
  const money = parseFloat(redPacketForm.money) || 0;
  // 计算5%的税，取整
  return Math.ceil(money * 0.05);
};

// 计算总积分
const calculateTotalAmount = () => {
  const money = parseFloat(redPacketForm.money) || 0;
  const count = parseInt(redPacketForm.count) || 1;

  // 根据不同类型计算
  if (redPacketForm.type === "average") {
    return (money * count).toFixed(2);
  } else if (redPacketForm.type === "rockPaperScissors") {
    // 猜拳红包需要计算税，取整
    const tax = Math.ceil(money * 0.05);
    return (money + tax).toFixed(2);
  } else {
    return money.toFixed(2);
  }
};

// 获取猜拳红包的实际需要积分（包含税费）
const getActualTotalForRockPaperScissors = () => {
  const inputMoney = parseFloat(redPacketForm.money) || 0;
  const tax = calculateTax();
  return inputMoney + tax;
};

// 显示红包类型选择器
const openTypeSelector = () => {
  showTypeSelector.value = true;
};

// 关闭红包类型选择器
const closeTypeSelector = () => {
  showTypeSelector.value = false;
};

// 选择红包类型
const selectRedPacketType = (type) => {
  redPacketForm.type = type;
  // 如果切换到专属红包，重置接收者列表
  if (type === "specify") {
    redPacketForm.receivers = [];
  }
  // 如果切换到猜拳红包，默认选择石头并调整积分金额
  if (type === "rockPaperScissors") {
    redPacketForm.gesture = 0;
    // 设置默认金额为32积分，由后端计算税费
    redPacketForm.money = "32";
  }
  // 如果切换到心跳红包，默认设置5个红包
  if (type === "heartbeat") {
    redPacketForm.count = "5";
  }
  // 更新红包留言为当前类型的描述
  redPacketForm.msg = getRedPacketTypeDesc(type);
  closeTypeSelector();
};

// 显示猜拳选择器
const openGestureSelector = () => {
  showGestureSelector.value = true;
};

// 关闭猜拳选择器
const closeGestureSelector = () => {
  showGestureSelector.value = false;
};

// 选择猜拳
const selectGesture = (gesture) => {
  redPacketForm.gesture = gesture;
  closeGestureSelector();
};

// 打开用户选择器
const showUserSelectorModal = () => {
  // 加载在线用户数据
  loadOnlineUsers();
  // 重置搜索
  searchQuery.value = "";
  filteredUsers.value = [...onlineUsers.value];
  showUserSelector.value = true;
};

// 关闭用户选择器
const closeUserSelector = () => {
  showUserSelector.value = false;
};

// 加载在线用户数据
const loadOnlineUsers = () => {
  try {
    const cachedUsers = uni.getStorageSync("chatOnlineUsers");
    if (cachedUsers) {
      onlineUsers.value = JSON.parse(cachedUsers);
      filteredUsers.value = [...onlineUsers.value];
      console.log("从缓存加载了在线用户数据, 数量:", onlineUsers.value.length);
    } else {
      console.log("缓存中没有在线用户数据");
      onlineUsers.value = [];
      filteredUsers.value = [];
    }
  } catch (e) {
    console.error("读取缓存中的在线用户数据失败:", e);
    onlineUsers.value = [];
    filteredUsers.value = [];
  }
};

// 搜索过滤用户
const filterUsers = () => {
  if (!searchQuery.value) {
    filteredUsers.value = [...onlineUsers.value];
    return;
  }

  const query = searchQuery.value.toLowerCase();
  filteredUsers.value = onlineUsers.value.filter((user) =>
    user.userName.toLowerCase().includes(query)
  );
};

// 切换用户选择状态
const toggleUserSelection = (user) => {
  const index = redPacketForm.receivers.findIndex((u) => u === user.userName);
  if (index === -1) {
    // 添加到已选择列表
    redPacketForm.receivers.push(user.userName);
  } else {
    // 从已选择列表中移除
    redPacketForm.receivers.splice(index, 1);
  }
};

// 判断用户是否已被选择
const isUserSelected = (user) => {
  return redPacketForm.receivers.includes(user.userName);
};

// 确认用户选择
const confirmUserSelection = () => {
  // 如果是专属红包，自动设置红包个数等于选择的人数
  if (redPacketForm.type === "specify" && redPacketForm.receivers.length > 0) {
    redPacketForm.count = redPacketForm.receivers.length.toString();
  }
  closeUserSelector();
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 发送红包
const sendRedPacket = async () => {
  if (isSending) return;

  try {
    isSending = true;
    showLoading("发送中...");

    // 验证积分数量 - 统一使用相同的最低要求
    if (parseFloat(redPacketForm.money) < 32) {
      showError("红包积分不能少于32");
      return;
    }

    // 验证红包个数
    if (
      ["random", "average"].includes(redPacketForm.type) &&
      (!redPacketForm.count || parseInt(redPacketForm.count) <= 0)
    ) {
      showError("请输入红包个数");
      return;
    }

    // 验证心跳红包个数
    if (
      redPacketForm.type === "heartbeat" &&
      (!redPacketForm.count || parseInt(redPacketForm.count) < 5)
    ) {
      showError("心跳红包至少需要5个红包");
      return;
    }

    // 验证专属红包接收者
    if (
      redPacketForm.type === "specify" &&
      redPacketForm.receivers.length === 0
    ) {
      showError("请选择至少一位接收者");
      return;
    }

    // 确保专属红包的红包个数与接收者数量一致
    if (redPacketForm.type === "specify") {
      redPacketForm.count = redPacketForm.receivers.length.toString();
    }

    if (!isFormValid.value) {
      showError("请完善红包信息");
      return;
    }

    // 构建红包数据
    let actualMoney = parseFloat(redPacketForm.money);

    // 移除猜拳红包前端扣税逻辑，直接使用用户输入的金额
    // 让后端来处理税费计算

    const redPacketData = {
      type: redPacketForm.type,
      money: actualMoney.toString(),
      count: redPacketForm.count.toString(),
      msg: redPacketForm.msg || getRedPacketTypeDesc(redPacketForm.type),
    };

    // 专属红包需要添加接收者 - 注意这里使用的是 recivers 而不是 receivers (API要求)
    if (redPacketForm.type === "specify") {
      redPacketData.recivers = redPacketForm.receivers;
    }

    // 猜拳红包需要添加猜拳选择
    if (redPacketForm.type === "rockPaperScissors") {
      redPacketData.gesture = redPacketForm.gesture;
    }

    // 发送红包消息 - 使用服务器需要的格式
    const content = `[redpacket]${JSON.stringify(redPacketData)}[/redpacket]`;
    console.log("发送红包内容:", content);
    const res = await api.chat.sendRedPacket(content);

    if (res.code === 0) {
      showSuccess("发送成功");

      // 触发事件通知聊天页面刷新事件处理器
      try {
        uni.$emit("chat_page_need_refresh", {
          timestamp: Date.now(),
          from: "redpacket",
        });
      } catch (e) {
        console.error("触发页面刷新事件失败:", e);
      }

      // 返回聊天页面
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    } else {
      showError(res.msg || "发送失败");
    }
  } catch (error) {
    console.error("发送红包失败:", error);
    showError(error.message || "发送失败");
  } finally {
    hideLoading();
    isSending = false;
  }
};

// 加载用户信息
const loadUserInfo = async () => {
  try {
    const res = await api.user.getCurrentUser();
    if (res.code === 0) {
      currentUser.value = res.data;
    } else {
      console.error("获取用户信息失败:", res.msg);
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

// 组件挂载
onMounted(() => {
  // 检查登录状态
  if (!isLoggedIn()) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }

  // 加载用户信息
  loadUserInfo();

  // 加载在线用户数据
  loadOnlineUsers();

  // 初始化表单数据
  redPacketForm.money = "32";
  redPacketForm.msg = "摸鱼者，事竟成！";
  redPacketForm.count = "2";
  redPacketForm.type = "random";

  // 确保弹出层状态已经初始化
  nextTick(() => {
    if (!showTypeSelector.value || !showGestureSelector.value) {
      console.warn("Popup states not initialized properly");
    }
  });
});
</script>

<style lang="scss">
.redpacket-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 设置所有input的placeholder样式 */
input::placeholder {
  text-align: right;
  color: #999;
}

/* 顶部导航栏 */
.redpacket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-bottom: 0;
  background-color: #fff;
  height: 90rpx;
  padding-top: 60rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .header-right {
    width: 60rpx;
  }
}

/* 红包表单 */
.redpacket-form {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .form-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-label {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }

    .item-input {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-left: 20rpx;
      position: relative;
      overflow: visible;

      .currency-symbol {
        font-size: 28rpx;
        color: #333;
        margin-right: 10rpx;
      }

      .money-input {
        text-align: right;
        font-size: 32rpx;
        color: #333;
        padding: 0;
        min-width: 200rpx;
        width: 300rpx;
        max-width: 400rpx;
        font-weight: 500;
      }

      .msg-input {
        text-align: right;
        font-size: 28rpx;
        color: #666;
        width: 400rpx;
      }

      .count-input {
        text-align: right;
        font-size: 28rpx;
        color: #333;
        width: 200rpx;
      }

      .input-unit {
        font-size: 28rpx;
        color: #666;
        margin-left: 10rpx;
      }

      .emoji-btn {
        margin-left: 20rpx;
        width: 48rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .item-value {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #666;

      FeatherIcon {
        margin-left: 10rpx;
      }
    }
  }
}

/* 红包底部 */
.redpacket-footer {
  padding: 30rpx;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .total-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 30rpx;

    .total-amount-label {
      font-size: 28rpx;
      color: #666;
    }

    .total-amount-value {
      font-size: 36rpx;
      color: #ff4d4f;
      font-weight: 500;
    }
  }

  .send-btn {
    width: 90%;
    height: 90rpx;
    background-color: #ff4d4f;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;

    &:active {
      opacity: 0.8;
    }

    &:disabled {
      background-color: #ffcccb;
      opacity: 0.6;
    }
  }

  .help-text {
    font-size: 24rpx;
    color: #999;
  }

  .tax-note {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

/* 自定义弹出层 */
.custom-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .popup-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(0);
    transition: transform 0.3s;
  }
}

/* 弹出层样式 */
.popup-content {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  max-height: 70vh;
  overflow-y: auto;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .popup-close {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .popup-body {
    padding-bottom: 30rpx;
  }
}

/* 红包类型选择器 */
.type-item {
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .type-item-content {
    display: flex;
    align-items: center;
  }

  .type-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;

    &.selected-type {
      background-color: #ff4d4f20;
    }
  }

  .type-info {
    display: flex;
    flex-direction: column;

    .type-name {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 6rpx;
    }

    .type-desc {
      font-size: 24rpx;
      color: #999;
    }
  }

  .type-selected {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 猜拳选择器 */
.gesture-list {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;

  .gesture-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .gesture-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10rpx;
      font-size: 50rpx;

      &.selected-gesture {
        background-color: #ff4d4f20;
        border: 2px solid #ff4d4f;
      }
    }

    .gesture-name {
      font-size: 28rpx;
      color: #333;
    }
  }
}

/* 用户选择器样式 */
.user-selector-popup {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  padding-bottom: 0;
}

.user-selector-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.user-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20rpx;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 28rpx;
  color: #333;
}

.user-selected {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.no-user-tip {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.user-selector-footer {
  margin-top: 0;
  border-top: 1px solid #f0f0f0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  flex-shrink: 0;
}

.selected-count {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.selector-btn-group {
  display: flex;
}

.selector-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  border-radius: 8rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
  margin-right: 20rpx;
}

.confirm-btn {
  background-color: #ff4d4f;
  color: #fff;
}
</style>
